<template>
    <!-- ref是获取元素的标识(类似于id) -->
    <h1 ref="h1Ref">{{ msg }}</h1>
    <p id="pId">段落标签</p>
    <button @click="clickBtn">修改数据</button>

    <!-- 跳转其他路由页面 -->
    <router-link to="/">跳转首页</router-link>
</template>

<script lang="ts" setup>

//beforeCreate\created:这两个生命周期在选项式API可以直接使用
//beforeCreate:vue实例刚刚被创建出来，定义的数据和方法还没有初始化完成
//created：实例已经在内存中创建完成，定义的数据和方法已经初始化好了，但此时模板还没有编译
//但是在组合式API中这两个周期无法使用，因为在setup中，默认就是实例中的选项已经初始化好了

import { ref, onBeforeMount ,onMounted, onBeforeUpdate,
    onUpdated,onBeforeUnmount,onUnmounted } from 'vue'

const h1Ref =ref<HTMLElement | null>(null)
const msg=ref<string>('初始数据')
console.log('setup:',h1Ref.value);

function clickBtn(){
    msg.value='新的数据'
}

//setup
//一般在这里进行定义数据、函数方法、发送ajax请求
console.log('setup:',h1Ref.value);


// 此时模板正在创建和编译，还没有挂在到页面中
onBeforeMount(()=>{
    console.log('onBeforeMount',h1Ref);
})

//此时，模板已经创建和编译完成，挂载到了页面中进行显示
//通过onMounted的生命周期去获取元素，当前生命周期的触发时机是模板已经挂载到页面上
//一般在这里进行开始定时器、添加dom元素的事件监听
onMounted(() => {
  console.log('onMounted:',h1Ref.value);
  var pDom=document.getElementById('pId')
  console.log('id:',pDom);
});
//状态（数据）在更新之时会执行此方法，数据已经更新到模板之上
onBeforeUpdate(()=>{
    console.log('onBeforeUpdate:',h1Ref.value);
})
//状态（数据）在更新之前会执行此方法，数据已经更新到模板之上（打了补丁）
//一般在这里进行做数据修改时的一些业务操作
onUpdated(()=>{
    console.log('onUpdated:',h1Ref.value);

})
//实例销毁之前会触发，正在取消组件的挂载
onBeforeUnmount(()=>{
 console.log('onBeforeUnmount:组件正在被销毁',msg.value);

})
//实例销毁后触发，已经取消组件的挂载
//一般在这里进行清空定时器，取消dom元素的事件监听
onUnmounted(()=>{
    console.log('onUnmounted:组件已经销毁',msg.value);

})

</script>

<style lang="less">


</style>
<!-- 安装插件volar Vue-Official-->